/*
 * @Descripttion : Dialog 对话框
 * @Author       : QianFox Team
 * @Date         : 2022-03-10 09:16:44
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2023-02-28 16:24:42
 */

import { _typeOf } from './common/utils';
import { _zIndex } from './common/variables';
import { Popup } from './popup';

/**
 * @description: dialog 构造函数
 * @param {String} title               标题
 * @param {String} content             内容
 * @param {String} cancelText          取消按钮文字
 * @param {String} confirmText         确认按钮文字
 * @param {String} width               弹框宽度
 * @param {String} marginTop           弹框与顶部距离
 * @param {Boolean} border             是否显示 head 和 foot 的分隔线
 * @param {String} buttonType          确定按钮类型(primary, warning, danger, success, info)
 * @param {String} buttonSize          按钮尺寸
 * @param {String} buttonAlign         按钮水平对齐
 * @param {Boolean} longButton         是否长按钮
 * @param {Boolean} className          dialog 类名
 * @param {Function} confirm           点击确定按钮回调函数
 * @param {Function} cancel            点击取消按钮回调函数
 * @return {*}
 * @Date: 2022-03-10 13:23:20
 */
function Dialog({ title, content, cancelText, confirmText, width, marginTop, border, buttonType, buttonSize, buttonAlign, longButton, className, confirm, cancel }) {
    Popup.call(this);
    this.LAST_CONTAINER = 'body > .foxui-dialog__wrapper:last';
    this.CLOSE_HANDLE = '.foxui-dialog__header-close';
    this.CANCEL_HANDLE = '.foxui-dialog__cancelbtn';
    this.CONFIRM_HANDLE = '.foxui-dialog__confirmbtn';

    this.TYPELIST = ['primary', 'warning', 'danger', 'success', 'info'];
    this.SIZELIST = ['default', 'medium', 'small', 'mini'];
    this.ALIGNLIST = ['left', 'center', 'right'];

    this.title = title || '';
    this.content = content || '';

    this.cancelText = cancelText;
    this.confirmText = confirmText;

    this.width = width || '30%';
    this.marginTop = marginTop || '15vh';
    this.border = border || false;

    this.buttonType = this.TYPELIST.indexOf(buttonType) !== -1 ? buttonType : 'primary';
    this.buttonSize = this.SIZELIST.indexOf(buttonSize) !== -1 ? buttonSize : 'default';
    this.buttonAlign = this.ALIGNLIST.indexOf(buttonAlign) !== -1 ? buttonAlign : 'right';
    this.longButton = longButton || false;
    this.className = className || '';

    this.confirm = confirm || null;
    this.cancel = cancel || null;
}

Object.setPrototypeOf(Dialog.prototype, Popup.prototype);

/**
 * @description: 添加对话框
 * @param {*}
 * @return {*}
 * @Date: 2022-03-10 13:23:26
 */
Dialog.prototype._add = function () {
    // 追加遮罩层(需放最前，否则 z-index 会出现过高)
    this._appednMask();

    // 追加 dialog 内容
    let html = this._dialogHtml();
    $('body').append(html);
    // 显现 dialog
    let $container = $(this.LAST_CONTAINER);
    $container.fadeIn('fast');

    // 绑定
    this._bindClose($container);
    this._bindCancel($container);
    this._bindConfirm($container);
};

/**
 * @description: 对话框 html
 * @param {*}
 * @return {*}
 * @Date: 2022-03-10 13:29:51
 */
Dialog.prototype._dialogHtml = function () {
    return [
        `<div class="foxui-dialog__wrapper" style="display:none; z-index:${_zIndex()}">`,
        `<div class="foxui-dialog${this.className ? ' ' + this.className : ''}" style="margin-top:${this.marginTop}; width:${this.width};">`,
        `<div class="foxui-dialog__header" ${this.border ? 'style="border-bottom: solid 1px #dbe0e2;"' : ''}>`,
        `<span class="foxui-dialog__title">${this.title}</span>`,
        '<button class="foxui-dialog__header-close">',
        '<i class="foxui-icon-guanbi-o"></i>',
        '</button>',
        '</div>',
        `<div class="foxui-dialog__body">${this.content}</div>`,
        `<div class="foxui-dialog__footer" style="text-align:${this.buttonAlign}; ${this.border ? 'border-top: solid 1px #dbe0e2; padding-top: 20px;' : ''}">`,
        `<button class="foxui-size-${this.buttonSize} foxui-dialog__cancelbtn ${this.longButton ? 'is-long' : ''}" style="${this.cancelText ? '' : 'display:none;'}">${this.cancelText || ''}</button>`,
        `<button class="foxui-solid-${this.buttonType} foxui-size-${this.buttonSize} foxui-dialog__confirmbtn ${this.longButton ? 'is-long' : ''}" style="${this.confirmText ? '' : 'display:none;'}">${
            this.confirmText || ''
        }</button>`,
        '</div>',
        '</div>',
        '</div>',
    ].join('');
};

Dialog.prototype._bindClose = function ($container) {
    let that = this;
    $container.find(this.CLOSE_HANDLE).on('click', function () {
        $container.fadeOut('fast', function () {
            $(this).remove();
            that._deleteMask();
        });
    });
};

Dialog.prototype._bindCancel = function ($container) {
    let that = this;
    $container.find(this.CANCEL_HANDLE).on('click', function () {
        that._close($container);
        if (_typeOf(that.cancel) === 'function') {
            that.cancel();
        }
    });
};

Dialog.prototype._bindConfirm = function ($container) {
    let that = this;
    $container.find(this.CONFIRM_HANDLE).on('click', function () {
        if (_typeOf(that.confirm) === 'function') {
            that.confirm(function () {
                that._close($container);
            });
        } else {
            that._close($container);
        }
    });
};

Dialog.prototype._close = function ($container) {
    $container.fadeOut('fast', function () {
        $(this).remove();
    });
    this._deleteMask();
};

/**
 * @description: 实例化对话框函数
 * @param {*} data
 * @return {*}
 * @Date: 2022-03-10 10:15:56
 */
function dialog(data) {
    let params = {};
    if (_typeOf(data) === 'object') {
        data && (params = data);
    } else {
        throw new Error(`dialog 方法传入参数必须是一个对象！`);
    }

    let dialog = new Dialog(params);
    // 添加对话框
    dialog._add();
}

export { dialog };
